<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Arial', sans-serif;
      }
      
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        padding: 20px;
      }
      
      .todo-app {
        width: 100%;
        max-width: 600px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 30px;
        overflow: hidden;
      }
      
      .app-title {
        text-align: center;
        margin-bottom: 30px;
        font-size: 28px;
        color: #333;
      }
      
      .todo-input-container {
        display: flex;
        margin-bottom: 20px;
      }
      
      .todo-input {
        flex: 1;
        padding: 15px 20px;
        border: 1px solid #e0e0e0;
        border-radius: 50px;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s;
      }
      
      .todo-input:focus {
        border-color: #6a11cb;
      }
      
      .add-button {
        margin-left: 10px;
        padding: 0 25px;
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
      }
      
      .add-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
      }
      
      .todo-list {
        list-style: none;
      }
      
      .todo-item {
        display: flex;
        align-items: center;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
      }
      
      .todo-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }
      
      .todo-checkbox {
        margin-right: 15px;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
      
      .todo-text {
        flex: 1;
        font-size: 16px;
        color: #333;
      }
      
      .todo-item.completed .todo-text {
        text-decoration: line-through;
        color: #888;
      }
      
      .delete-button {
        color: #ff5252;
        background: none;
        border: none;
        font-size: 14px;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 4px;
        transition: background-color 0.3s;
      }
      
      .delete-button:hover {
        background-color: #ffebee;
      }
      
      .empty-message {
        text-align: center;
        color: #888;
        margin: 30px 0;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <div class="todo-app">
      <h1 class="app-title">Todo App</h1>
      
      <div class="todo-input-container">
        <input type="text" class="todo-input" id="todo-input" placeholder="Add a todo">
        <button class="add-button" id="add-button">Add Todo</button>
      </div>
      
      <ul class="todo-list" id="todo-list">
        <!-- Todo items will be added here dynamically -->
      </ul>
    </div>
    
    <script>
      // DOM elements
      const todoInput = document.getElementById('todo-input');
      const addButton = document.getElementById('add-button');
      const todoList = document.getElementById('todo-list');
      
      // Load todos from localStorage
      let todos = JSON.parse(localStorage.getItem('todos')) || [];
      
      // Save todos to localStorage
      function saveTodos() {
        localStorage.setItem('todos', JSON.stringify(todos));
      }
      
      // Render todos
      function renderTodos() {
        // Clear the list
        todoList.innerHTML = '';
        
        // Check if there are no todos
        if (todos.length === 0) {
          const emptyMessage = document.createElement('p');
          emptyMessage.className = 'empty-message';
          emptyMessage.textContent = '没有待办事项，添加一个吧！';
          todoList.appendChild(emptyMessage);
          return;
        }
        
        // Render each todo
        todos.forEach((todo, index) => {
          const todoItem = document.createElement('li');
          todoItem.className = `todo-item ${todo.completed ? 'completed' : ''}`;
          
          const checkbox = document.createElement('input');
          checkbox.type = 'checkbox';
          checkbox.className = 'todo-checkbox';
          checkbox.checked = todo.completed;
          checkbox.addEventListener('change', () => toggleTodo(index));
          
          const todoText = document.createElement('span');
          todoText.className = 'todo-text';
          todoText.textContent = todo.text;
          
          const deleteButton = document.createElement('button');
          deleteButton.className = 'delete-button';
          deleteButton.textContent = 'del';
          deleteButton.addEventListener('click', () => deleteTodo(index));
          
          todoItem.appendChild(checkbox);
          todoItem.appendChild(todoText);
          todoItem.appendChild(deleteButton);
          
          todoList.appendChild(todoItem);
        });
      }
      
      // Add a new todo
      function addTodo() {
        const text = todoInput.value.trim();
        if (text) {
          todos.push({
            text,
            completed: false
          });
          todoInput.value = '';
          saveTodos();
          renderTodos();
        }
      }
      
      // Toggle todo completion status
      function toggleTodo(index) {
        todos[index].completed = !todos[index].completed;
        saveTodos();
        renderTodos();
      }
      
      // Delete a todo
      function deleteTodo(index) {
        todos.splice(index, 1);
        saveTodos();
        renderTodos();
      }
      
      // Event listeners
      addButton.addEventListener('click', addTodo);
      
      todoInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          addTodo();
        }
      });
      
      // Initial render
      renderTodos();
      
      // Add some default todos if none exist
      if (todos.length === 0) {
        todos = [
          { text: '吃饭', completed: false },
          { text: '吃饭', completed: false },
          { text: '吃饭', completed: true }
        ];
        saveTodos();
        renderTodos();
      }
    </script>
  </body>
</html>
